<template>
  <div class="house_details">
    <div class="top_back">
      <top-go-back></top-go-back>
    </div>
    <div style="height: 210px">
      <house-swipe v-if="content.images && content.videos[0]" :videoUrl="content.videos[0]" :swipeContent="content.images"></house-swipe>
    </div>
    <div class="content">
      <house-content v-if="content" :houseContent="content"></house-content>
    </div>
    <div class="house_about">
      <div class="house_about_content">
        <div class="about_title">同小区房源</div>
        <div class="about_content">
          <list-content v-if="content.recommend" :houseListData="content.recommend"></list-content>
        </div>
      </div>
    </div>
    <div>
      <build-nav v-if="content.user" :phoneNumber="content.user.phone" :userData="content.user" :titleType="titleType"></build-nav>
    </div>
  </div>
</template>

<script>
  import ListContent from '../../components/listComponents/ListContent'
  import TopGoBack from '../../components/common/TopGoBack';
  import HouseSwipe from '../../components/house/HouseSwipe';
  import HouseContent from './HouseContent';
  import BuildNav from '../../components/common/BuildNav';
  import {houseData} from '../../axios/api';
  import Vue from 'vue';
  import {Actionsheet} from 'mint-ui';

  Vue.component(Actionsheet.name, Actionsheet);
  export default {
    name: 'HouseDetails',
    data() {
      return {
        title: '相关联系',
        content: {},
        titleType:1
      }
    },
    created(){
      this.getHouseData();
    },
    watch: {
      '$route'(to, from) {
        if (to.name === 'HouseDetails') {
          // console.log(to.params,66666)  ;   // 在此调用函数
          this.getHouseData();
        }
        // if(from.name === 'NewHouseDetails'){
        //
        // }
      }
    },
    methods: {
      //获取房源详情
      getHouseData(){
        this.content = {};
        houseData(this.$route.params.id).then(res=>{
          console.log(res.data,"相关房源");
          this.content = res.data;
          this.$store.commit('setCircleOfFriendsTitle',res.data.premises.name);
          this.$store.commit('setCircleOfFriendsDesc',res.data.description);
        }).catch(err=>{
          console.log(err)
        })
      }
    },
    components: {
      BuildNav,
      HouseSwipe,
      TopGoBack,
      HouseContent,
      ListContent
    }
  }
</script>

<style scoped>
  .house_details {
    position: relative;
    padding-bottom: 50px;
  }

  .house_details .top_back {
    position: absolute;
    width: 100%;
    left: 0;
    top: 10px;
    z-index: 99;
  }

  .house_about {
    border-top: 10px solid #f8f8f8;
    /*padding: 10px;*/
  }
  .house_about_content{

  }
  .house_about_content .about_title{
    padding: 10px;
    font-size: 1rem;
    color: #000000;
  }
</style>
